<div class="clear span-8">
  <div class="sample">
    <div class="widget" id="json_sample"></div>
  </div>
  <h3>json</h3>
  <p>
    Sets the strokes in the widget.
    If the <tt>json</tt> parameter is not provided,
    returns a JSON representation of the strokes.
  </p>

  <h4>Parameters</h4>
  <ol>
    <li>json <code>string</code></li>
  </ol>
</div>
<div class="span-16 last">
  {% capture js %}
// The viewer shows a black diagonal path.
// path parameter can be array or SVG path format, e.g., "M10,10L90,90".
viewer.json('[{' +
  '"type":"path",' +
  '"path":[["M",10,10],["L",90,90]],' +
  '"fill":"none", "stroke":"#000000",' +
  '"stroke-opacity":1,' +
  '"stroke-width":5,' +
  '"stroke-linecap":"round",' +
  '"stroke-linejoin":"round"' +
  '}]'
);

// Returns the JSON representation of the strokes.
var json = viewer.json();
{% endcapture %}
    <pre class="code">{{ js | strip | escape }}</pre>

  <script type="text/javascript">
    $(document).ready(function() {
      var json_sample = Raphael.sketchpad("json_sample", {
        width: 100,
        height: 100,
        editing: false
      });
      json_sample.json('[{' +
        '"type":"path",' +
        '"path":[["M",10,10],["L",90,90]],' +
        '"fill":"none", "stroke":"#000000",' +
        '"stroke-opacity":1,' +
        '"stroke-width":5,' +
        '"stroke-linecap":"round",' +
        '"stroke-linejoin":"round"' +
        '}]'
      );
    });
  </script>
</div>
